<template>
    <Echart v-if="flag" :options="pieOptions" :height="300" />
</template>
<script lang="ts" setup>
import { reactive, defineProps, defineEmits, defineExpose,nextTick,ref } from "vue"
import { Echart } from '@/components/Echart'
// import * as echarts from 'echarts';
import { set } from 'lodash-es'
import { getClassCount } from "@/api/table"
import {useUserStoreWithOut} from "@/store/modules/user"
const userStore = useUserStoreWithOut()

console.log(userStore.userInfo)
// 从父组件获取下 cid 
const props = defineProps({
    cid: {
        type: Number,
        default: ""
    }
})
const flag = ref(false)
const pieOptions = ref({
    title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})

const getClassCountPie = async (cid) => {
    let res = null
    if (cid) {
        res = await getClassCount(cid).catch(() => { })
    } else {
        res = await getClassCount().catch(() => { })
    }

    if (res) {
        console.log(res)
        let datas = []
        for(var i=0;i<res.data.length;i++){
            datas.push({name:res.data[i].nickname,value:res.data[i].zs})
        }

        pieOptions.value.series.data = datas
        // console.log(pieOptions,74)
        // set(
        //     pieOptions,
        //     'series.data',
        //     datas
        // )
        console.log(pieOptions,74)
        flag.value=true
        // pieOptionsData!.series![0].data = res.data.map((v) => {
        //     return {
        //         name: t(v.name),
        //         value: v.value
        //     }
        // })
    }
}

nextTick(()=>{
    getClassCountPie(props.cid)
})


defineExpose({
    getClassCountPie
})

</script>